<template>
  <div class="app-container">
    <el-tabs
      v-model="activeName"
      type="border-card"
      class="el-tabs"
      @tab-click="tabClick"
    >
      <el-tab-pane label="部门月报表" name="department">
        <el-form ref="deaprtFormRef" :model="form" inline>
          <el-form-item>
            <el-select v-model="form.departName" placeholder="部门名称">
              <el-option
                :label="item.deptName"
                :value="item.deptName"
                v-for="item in allDepart"
                :key="item.deptId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="form.time"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :format="'yyyy-MM-dd'"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              plain
              @click="handleQuery"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <div class="text" v-if="showText">
          请选择部门和时间，点击查询后根据所选内容生成报表。
        </div>
        <div class="content" v-else>
          <div class="title">{{ title }}</div>
          <el-card>
            <el-row :gutter="10">
              <el-col :span="8">
                <span>部门: {{ department }}</span>
              </el-col>
              <el-col :span="8" :offset="8">
                <span>生成日期: {{ startTime }}</span>
              </el-col>
            </el-row>
          </el-card>
          <div class="table1Name">
            {{ table1Name }}
          </div>
          <Table :tableTilte="'1. 潜在风险评估'" :tableData="tableData1">
          </Table>
          <Table :tableTilte="'2. 自杀倾向评估'" :tableData="tableData2">
          </Table>
          <Table :tableTilte="'3.1. 鉴别评估'" :tableData="tableData3"> </Table>
          <myCharts :echartsData="chartData"></myCharts>
          <fenbuVue
            :tableTilte="'3.2. 处理情况分布'"
            :tableData="tableData4"
          ></fenbuVue>
          <Table
            :tableTilte="'4. 生活事件跟踪评估'"
            :tableData="tableData5"
          ></Table>

          <div class="table1Name">
            {{ table2Name }}
          </div>
          <consult :departALLData="departALLData"></consult>
          <div class="btn">
            <el-link
              :underline="false"
              class="el-link"
              @click="handleExport"
              v-hasPermi="['system:result:export']"
              >导出</el-link
            >
            <el-link :underline="false" @click="cancel">取消</el-link>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="咨询中心月报表" name="consult">
        <el-form ref="formRef" :model="form2" inline>
          <el-form-item>
            <el-select v-model="form2.departName" placeholder="部门名称">
              <el-option
                :label="item.deptName"
                :value="item.deptName"
                v-for="item in allDepart"
                :key="item.deptId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="form2.time"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :format="'yyyy-MM-dd'"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              plain
              @click="handleQuery2()"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <div class="text" v-if="showText2">
          请选择部门和时间，点击查询后根据所选内容生成报表。
        </div>
        <div class="content" v-else>
          <div class="title">{{ title2 }}</div>
          <el-card>
            <el-row :gutter="10">
              <el-col :span="8">
                <span>部门: {{ department2 }}</span>
              </el-col>
              <el-col :span="8" :offset="8">
                <span>生成日期: {{ startTime2 }}</span>
              </el-col>
            </el-row>
          </el-card>
          <consultTable
            :tableTilte="'不同心理危机水平的频次分布'"
            :tableData="reportData"
            :table2Tilte="'咨询人员问题类型分布'"
          ></consultTable>

          <div class="btn">
            <el-link :underline="false" class="el-link">导出</el-link>
            <el-link :underline="false" @click="cancel">取消</el-link>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Table from "@/components/Table";
import myCharts from "@/components/Table/charts.vue";
import fenbuVue from "@/components/Table/fenbu.vue";
import consult from "@/views/fileManagement/crisis/consult/index.vue";
import consultTable from "@/components/Table/consultTable.vue";
import html2canvas from "html2canvas";
import { jsPDF } from "jspdf";
// import { listAllDept } from "@/api/consult/stat-analysis.js";
import {
  listDept,
  monthlyReportList,
  monthlyReportCenterList,
} from "@/api/consult/monthly-report.js";
export default {
  data() {
    return {
      activeName: "department",
      form: {
        departName: null, // 部门名称
        time: null, // 时间
      },
      allDepart: [],
      form2: {
        departName: null, // 部门名称
        time: null, // 时间
      },
      departALLData: [], //第一表
      reportData: [], //第二表
      showText: true,
      showText2: true,
      title: "部门统计",
      title2: "咨询统计",
      department: "学校管理部门",
      startTime: "2020/10/01",
      department2: "全部",
      startTime2: "2020/10/01",
      table1Name: "不同心理危机水平的频次分布",
      table2Name: "咨询记录统计",
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      chartData: [],
    };
  },
  components: {
    Table,
    myCharts,
    fenbuVue,
    consult,
    consultTable,
  },
  mounted() {
    this.getAllDepart();
  },
  methods: {
    // 获取所有部门列表
    getAllDepart() {
      listDept().then((res) => {
        this.allDepart = res.data;
      });
    },
    // 搜索
    handleQuery() {
      if (this.form.departName !== null && this.form.time !== null) {
        this.showText = false;
      }else if (this.form.departName === null || this.form.time === null) {
        this.$message({
          message: "请选择部门和时间",
          type: "warning",
        })
        return false;
      }
      if (this.form.time) {
        const formateTime = this.form.time.map((timeString) => {
          const date = new Date(timeString);
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, "0");
          const day = String(date.getDate()).padStart(2, "0");
          return {
            beginTime: `${year}-${month}-${day}`,
            endTime: `${year}-${month}-${day}`,
          };
        });
        this.form.beginTime = formateTime[0].beginTime;
        this.form.endTime = formateTime[0].endTime;
      }

      delete this.form.time;
      // console.log(this.form);
      monthlyReportList(this.form).then((res) => {
        if (res.code == 200) {
          this.departALLData = res.data;
          // console.log(this.departALLData);
          this.department = this.departALLData.dempname;
          this.startTime = this.departALLData.creatDate;

          this.tableData1 = this.departALLData.listOfRisks;
          this.tableData1 = [
            {
              name: "潜在风险评估",
              zanwu: this.departALLData.listOfRisks[0][0].toString(),
              jiaodi: this.departALLData.listOfRisks[0][1].toString(),
              zhodeng: this.departALLData.listOfRisks[0][2].toString(),
              jiaogao: this.departALLData.listOfRisks[0][3].toString(),
              jigao: this.departALLData.listOfRisks[0][4].toString(),
            },
          ];
          this.tableData2 = [
            {
              name: "潜在风险评估",
              zanwu: this.departALLData.suicideList[0][0].toString(),
              jiaodi: this.departALLData.suicideList[0][1].toString(),
              zhodeng: this.departALLData.suicideList[0][2].toString(),
              jiaogao: this.departALLData.suicideList[0][3].toString(),
              jigao: this.departALLData.suicideList[0][4].toString(),
            },
          ];

          this.tableData3 = [
            {
              name: "潜在风险评估",
              zanwu: this.departALLData.identificationList[0][0].toString(),
              jiaodi: this.departALLData.identificationList[0][1].toString(),
              zhodeng: this.departALLData.identificationList[0][2].toString(),
              jiaogao: this.departALLData.identificationList[0][3].toString(),
              jigao: this.departALLData.identificationList[0][4].toString(),
            },
          ];

          this.chartData = Object.values(
            this.departALLData.identificationList[0]
          );
          //  console.log(this.chartData);

          this.tableData4 = [
            {
              name: "默认部门",
              zanwu:
                this.departALLData.aListOfProcessingMethods[0][0].toString(),
              jiaodi:
                this.departALLData.aListOfProcessingMethods[0][1].toString(),
              zhodeng:
                this.departALLData.aListOfProcessingMethods[0][2].toString(),
              jiaogao:
                this.departALLData.aListOfProcessingMethods[0][3].toString(),
              jigao:
                this.departALLData.aListOfProcessingMethods[0][4].toString(),
            },
          ];

          this.tableData5 = [
            {
              name: "跟踪评估",
              zanwu: this.departALLData.keepTrackOfTheList[0][0].toString(),
              jiaodi: this.departALLData.keepTrackOfTheList[0][1].toString(),
              zhodeng: this.departALLData.keepTrackOfTheList[0][2].toString(),
              jiaogao: this.departALLData.keepTrackOfTheList[0][3].toString(),
              jigao: this.departALLData.keepTrackOfTheList[0][4].toString(),
            },
          ];
        }
      });
    },
    handleQuery2() {
      if (this.form2.departName !== "" && this.form2.time !== "") {
        this.showText2 = false;
      } else if(this.form2.departName===null || this.form2.time===null) {
        this.$message({
          message: "请选择部门和时间",
          type: "warning",
        })
        return
      }
      if (this.form2.time) {
        const formateTime = this.form2.time.map((timeString) => {
          const date = new Date(timeString);
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, "0");
          const day = String(date.getDate()).padStart(2, "0");
          return {
            beginTime: `${year}-${month}-${day}`,
            endTime: `${year}-${month}-${day}`,
          };
        });
        this.form2.beginTime = formateTime[0].beginTime;
        this.form2.endTime = formateTime[0].endTime;
      }
      delete this.form2.time;
      monthlyReportCenterList(this.form2).then((res) => {
        if (res.code == 200) {
          this.reportData = res.data;
          // console.log("数据", this.reportData);
          this.department2 = this.reportData.dempname;
          this.startTime2 = this.reportData.creatDate;

          // this.consult2Table = this.reportData.problemLevel;
        }
      });
    },
    tabClick(tab) {
      // console.log(tab.name);
    },
    cancel() {
      this.showText = true;
      this.showText2 = true;
      this.form = {
        departName: null,
        time: null,
      };
      this.form2 = {
        departName: null,
        time: null,
      };
      // Object.assign(this._data, this.$options.data());
    },
    // 导出
    handleExport() {
      const contentElement = document.querySelector(".content");

      // Use html2canvas to capture the content as an image
      html2canvas(contentElement).then((canvas) => {
        const imgData = canvas.toDataURL("image/jpeg");
        const pdf = new jsPDF();

        const imgWidth = 210; // A4 width in mm
        const imgHeight = (canvas.height * imgWidth) / canvas.width;

        let position = 0;
        let pageHeight = imgHeight;

        // Add content to PDF in chunks, creating new pages as needed
        while (position < canvas.height) {
          const chunkHeight = Math.min(pageHeight, canvas.height - position);
          pdf.addImage(
            imgData,
            "JPEG",
            0,
            0,
            imgWidth,
            chunkHeight,
            "",
            "FAST"
          );
          position += chunkHeight;

          // If there's more content, add a new page
          // if (position < canvas.height) {
          //   pdf.addPage();
          // }
        }

        // Save the PDF file
        pdf.save("部门统计.pdf");
      });
    },
  },
};
</script>

<style  scoped>
.el-tabs {
  min-height: 100vh;
}
.content {
  text-align: center;
  padding: 2rem 10rem;
  font-size: 2rem;
}
.title {
  font-size: 2rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 2rem;
}
::v-deep .el-card__body {
  padding: 2rem 2rem 2rem 2rem;
  font-size: 1.2rem;
  font-weight: 500;
}
.el-descriptions {
  font-size: 1.2rem;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
::v-deep
  .el-descriptions--medium:not(.is-bordered)
  .el-descriptions-item__cell {
  flex: 1;
  padding-bottom: 0px;
  padding-left: 5%;
}
.table1Name {
  margin: 2rem 0;
  font-size: 1.5rem;
  font-weight: 500;
  color: rgb(117, 190, 231);
}
.el-link {
  font-size: 1.2rem;
  margin-right: 2rem;
}
</style>